<template>
	<view class="user-page">
		<view class="device-list">
			<view style="height: 30rpx;"></view>
			<view class="top-box">
				<view class="input-search">
					<input type="text" placeholder="输入场所" v-model="shop" />
					<image src="../../static/images/home/beifen3.png" @click="refreshList"></image>
				</view>
				<view class="input-search">
					<input type="text" placeholder="输入编号" v-model="device_id" />
					<image src="../../static/images/home/beifen3.png" @click="refreshList"></image>
				</view>
			</view>
			<z-paging ref="paging" style="top: 20rpx;height: 80vh;" class="device-list-box" v-model="datalist" @query="getAgentUserList" default-page-size="20" :auto="false">
				<template #top>
					<view class="device-title" style="padding-top: 15rpx;padding-bottom: 15rpx;">
						<view class="t0">编号</view>
						<view class="t1">场所</view>
						<view class="t2">时间</view>
					</view>
				</template>
				<view class="device-list-item" v-for="(item, i) in datalist" :key="i" style="padding-top: 15rpx;padding-bottom: 15rpx;">
					<view class="t0">{{ item.id }}</view>
					<view class="t1">{{ item.shop }}</view>
					<view class="t2">{{ item.createtime }}</view>
				</view>
			</z-paging>
		</view>
	</view>
</template>
<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				datalist: [],
				dataTotal: 0,
				keywords: '',
				device_id:'',
				shop:''
			};
		},
		onLoad(options) {
			this.device_id=options.device_id
			this.shop=options.shop
		},
		onShow() {
			this.getAgentUserList(1,99999);
		},
		methods: {
			getAgentUserList(pageNo, pageSize) {
				api.getDeviceLogList({
					device_id:this.device_id,
					shop:this.shop
				}).then(res => {
					this.$refs.paging.complete(res.data.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			refreshList() {
				this.$refs.paging.reload()
			}
		}
	};
</script>
<style lang="scss" scoped>
	.top-box {
		display: flex;
		grid-gap: 20rpx;
		margin:  0 20rpx;
		.input-search {
			position: relative;
			flex: 1;

			uni-input {
				background: #ffffff;
				box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1);
				border-radius: 24rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #7d8592;
				padding: 24rpx 40rpx;
				font-style: normal;
			}

			uni-image {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 24rpx;
				top: 20rpx;
			}
		}
	}

	.user-page {
		width: 100%;
		min-height: 100vh;
		background-color: #F7F7F7;
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
	}

	.device-list {
		.device-title {
			display: flex;
			align-items: center;
			font-weight: 550;
			font-size: 30rpx;
			color: #000000;
			border-bottom: 2rpx solid #d3ebff;
			padding: 0 28rpx;

			.t0 {
				width: 20%;
			}

			.t1 {
				width: 50%;
				text-align: center;
			}

			.t2 {
				width: 30%;
				text-align: center;
			}
		}

		.device-list-box {
			border-radius: 14px;
			position: relative;
			margin: 0rpx 20rpx;
			padding: 20rpx 0rpx;
			border-radius: 20rpx;
			background: linear-gradient(180deg, #DFFAFF 0%, #FFFFFF 40%);

			.device-list-item {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				color: #000000;
				border-bottom: 2rpx solid #d3ebff;
				padding: 0 28rpx;

				uni-image {
					width: 14rpx;
					height: 24rpx;
					text-align: right;
				}

				.t0 {
					width: 20%;
				}
				
				.t1 {
					width: 50%;
					text-align: center;
				}
				
				.t2 {
					width: 30%;
					text-align: center;
				}
			}

			.more-tip {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				text-align: center;
				margin-top: 40rpx;
			}
		}

		.btn {
			background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
			border-radius: 44rpx;
			font-weight: 500;
			font-size: 34rpx;
			color: #ffffff;
			line-height: 88rpx !important;
			text-align: right;
			height: 88rpx;
			margin: 36rpx 28rpx;
			width: calc(100% - 56rpx);
			text-align: center;
			border: none;

			&:after {
				border: none;
			}
		}

		.empty-box {
			margin: 0 -20rpx;
			text-align: center;
			background: url('../../static/images/home/empty-bg.png') no-repeat;
			padding: 200rpx 0 160rpx;
			background-size: 100% 100%;

			uni-image {
				width: 400rpx;
				height: 340rpx;
			}

			uni-text {
				font-size: 28rpx;
				color: #a7a5a5;
				line-height: 40rpx;
				margin-top: 50rpx;
				display: block;
			}
		}
	}
</style>